<!-- 学生主页 -->
<template>
    <div class="student-dashboard">
        <div class="header">
            <h1>🎓 学生门户</h1>
            <p>欢迎来到加利顿大学迎新平台</p>
        </div>
        
        <div class="quick-actions">
            <div class="action-card">
                <h3>📝 信息提交</h3>
                <p>完善个人信息</p>
            </div>
            <div class="action-card">
                <h3>💰 在线缴费</h3>
                <p>缴纳学费和杂费</p>
            </div>
            <div class="action-card">
                <h3>🔍 信息查询</h3>
                <p>查看个人信息</p>
            </div>
            <div class="action-card">
                <h3>📅 日常安排</h3>
                <p>查看课程安排</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user.js'

const userStore = useUserStore()
console.log('学生Dashboard - 当前用户角色:', userStore.getRole)
</script>

<style scoped>
.student-dashboard {
    padding: 20px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

.header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    border-radius: 10px;
}

.header h1 {
    margin: 0 0 10px 0;
    font-size: 2.5em;
}

.header p {
    margin: 0;
    opacity: 0.9;
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.action-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease;
    border-left: 4px solid #4facfe;
}

.action-card:hover {
    transform: translateY(-5px);
}

.action-card h3 {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 1.3em;
}

.action-card p {
    margin: 0;
    color: #666;
}
</style>